<template>
  <div id="box">
    <div class="main-container dn-container">
      <div class="main-header">
        <div class="header-left">
          <div class="back-div" @click="goback">
            <i class="el-icon-back"></i>
            <span>返回</span>
          </div>
          <div class="tabs">
            <div :class="tab_id == 1 ? 'tab on' : 'tab'" @click="tab_id = 1">
              <i></i>
              <span>页面装修</span>
            </div>
            <div v-if="type == 1" :class="tab_id == 2 ? 'tab on' : 'tab'" @click="showadvs">
              <i></i>
              <span>启动广告</span>
            </div>
            <div :class="tab_id == 3 ? 'tab on' : 'tab'" @click="tab_id = 3">
              <i></i>
              <span>页面设置</span>
            </div>
          </div>
        </div>
        <div class="header-right">
          <!--  <div class="tabs">

        </div>-->
          <div class="btn-group" v-if="temp == 0">
            <div class="btn-apply" @click="bfsave(1)"><div>保存</div></div>
            <div class="btn-apply" @click="bfsave(3)"><div>另存为模板</div></div>
            <div class="btn-apply" @click="bfsave(2)"><div>保存并应用</div></div>
          </div>
          <div class="btn-group" v-else>
            <div class="btn-apply" @click="bfsave(1)"><div>保存页面</div></div>
            <!-- <div v-if="temp == 2" class="btn-apply" @click="bfsave(1)"><div>保存页面</div></div> -->
            <div v-if="temp == 2" class="btn-apply" @click="bfsave(4)"><div>保存模板</div></div>
            <div class="btn-apply" @click="bfsave(3)"><div>另存为模板</div></div>
            <div class="btn-apply" @click="bfsave(2)"><div>保存并应用</div></div>
          </div>
        </div>
      </div>
      <div class="main_body">
        <div class="main_left" v-if="tab_id != 2">
          <el-collapse v-model="activeNames">
            <template v-for="(item, i) in btn_data" v-if="btn_data_list[type - 1].indexOf(item.type) > -1">
              <el-collapse-item :key="i" :title="item.name" :name="i">
                <div class="btn_group">
                  <div
                    @click="addcomponent(data)"
                    class="btn_item"
                    v-for="(data, i) in item.list"
                    :key="i"
                    v-has="data.a_id"
                    v-if="data.types.indexOf(btn_data_txt[type - 1]) > -1"
                  >
                    <i :class="data.icon"></i>

                    <span>{{ data.name }}</span>
                  </div>
                </div>
              </el-collapse-item>
            </template>
          </el-collapse>
        </div>
        <div class="menulist" v-if="tab_id != 2">
          <draggable :scroll="true" :animation="500" element="div" v-bind="dragOptions" v-model="list" v-if="tab_id == 1 || tab_id == 3">
            <div
              class="menu_item"
              @click.stop="handleChange(i)"
              v-for="(item, i) in list"
              :key="i"
              v-bind:class="{
                'active-item': item.active && !hideline,
                disabled: item.name == 'detail_btns'
              }"
            >
              <div>
                <div class="menu_icon_box"><i :class="geticon(item.name)"></i></div>
                <span>{{ getname(item.name) }}</span>
              </div>
              <el-popover placement="top" width="160" v-model="item.visible1">
                <p>确定删除吗？</p>
                <div style="text-align: right; margin: 0">
                  <el-button size="mini" type="text" @click="item.visible1 = false">取消</el-button>
                  <el-button type="primary" size="mini" @click.stop="delhandle(i)">确定</el-button>
                </div>
                <span slot="reference" class="del">删除</span>
              </el-popover>
            </div>
          </draggable>
          <div
            class="menu_item"
            @click="handleChange1(i)"
            v-for="(item, i) in list1"
            :key="i"
            v-bind:class="{
              'active-item': item.active && !hideline,
              disabled: item.name == 'detail_btns'
            }"
          >
            <div>
              <div class="menu_icon_box"><i :class="geticon(item.name)"></i></div>
              <span>{{ getname(item.name) }}</span>
            </div>
            <el-popover placement="top" width="160" v-model="item.visible1">
              <p>确定删除吗？</p>
              <div style="text-align: right; margin: 0">
                <el-button size="mini" type="text" @click="item.visible1 = false">取消</el-button>
                <el-button type="primary" size="mini" @click.stop="delhandle1(i)">确定</el-button>
              </div>
              <span slot="reference" class="del">删除</span>
            </el-popover>
          </div>
        </div>
        <div class="phone-area" ref="copyDom">
          <div class="row relative w840">
            <div class="scroll-body">
              <div class="page-content">
                <div class="diy-phone">
                  <div class="phone-body" :style="'background-color:' + page_config.bg_color + ';color:' + page_config.text_color">
                    <div id="phone_header" class="phone-title goods" v-bind:class="tab_id == 3 ? 'phone-title pageInfo' : ''" @click="acivetitle()">
                      <div class="phone-top">
                        <div class="custom-navbar" :style="headstyle">
                          <img :src="navJson[page_config.nav_type].top" alt style="width: 364px; height: 16px; position: absolute; top: 2px; left: 5.5px; z-index: 100;" />
                          <img :src="navJson[page_config.nav_type].btn" alt />
                        </div>
                      </div>
                      <p class="page-title" :style="'color:' + page_config.nav_type">{{ page_data.nav_name }}</p>
                    </div>
                    <div class="phone-main">
                      <draggable :scroll="true" :animation="500" element="div" v-bind="dragOptions" v-model="list" v-if="tab_id == 1 || tab_id == 3">
                        <div
                          @click.stop="handleChange(i)"
                          v-for="(item, i) in list"
                          :key="i"
                          class="drag-item"
                          :id="'item' + i"
                          v-bind:class="{
                            'active-item': item.active && !hideline,
                            disabled: item.name == 'detail_btns'
                          }"
                        >
                          <component :data="item.data" v-bind:is="item.components_item"></component>
                          <el-popover placement="top" width="160" v-model="item.visible">
                            <p>确定删除吗？</p>
                            <div style="text-align: right; margin: 0">
                              <el-button size="mini" type="text" @click="item.visible = false">取消</el-button>
                              <el-button type="primary" size="mini" @click.stop="delhandle(i)">确定</el-button>
                            </div>
                            <span slot="reference" class="del">删除</span>
                          </el-popover>
                          <i class="left-border border"></i>
                          <i class="right-border border"></i>
                        </div>
                      </draggable>
                      <template v-if="tab_id == 2">
                        <component :data="advs.data" v-bind:is="advs.components_item"></component>
                      </template>
                      <template v-for="(item, i) in list1">
                        <div @click="handleChange1(i)">
                          <component @delhandle="delhandle1(i)" :data="item.data" :active="item.active && !hideline" v-bind:is="item.components_item"></component>
                        </div>
                      </template>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="component-setter" v-if="controls && tab_id == 1">
          <component ref="controls" v-bind:is="controls" :data="controls_data" @change="Control_Change"></component>
        </div>
        <div class="component-setter" v-if="tab_id == 2"><component ref="controls" v-bind:is="adv_controls" :data="advs.data"></component></div>
        <div class="component-setter" v-if="tab_id == 3">
          <el-card class="box-card">
            <div slot="header" class="clearfix"><span>页面设置</span></div>
            <div>
              <el-form label-width="80px" v-model="page_data">
                <el-form-item label="列表标题"><el-input v-model="page_data.page_name"></el-input></el-form-item>

                <el-form-item label="背景颜色"><ColorPicker :color="page_config" :name="'bg_color'"></ColorPicker></el-form-item>
                <el-form-item label="字体颜色"><ColorPicker :color="page_config" :name="'text_color'"></ColorPicker></el-form-item>
              </el-form>
            </div>
            <div class="clearfix el-card__header"><span>导航设置</span></div>
            <div style="margin-top: 20px;">
              <el-form label-width="80px" v-model="page_data">
                <el-form-item label="导航标题"><el-input v-model="page_data.nav_name"></el-input></el-form-item>

                <el-form-item label="导航背景">
                  <el-radio-group v-model="page_config.bg_type">
                    <el-radio :label="1">背景颜色</el-radio>
                    <el-radio :label="2">背景图片</el-radio>
                  </el-radio-group>
                </el-form-item>
                <el-form-item label="背景颜色" v-if="page_config.bg_type == 1"><ColorPicker :color="page_config" :name="'nav_bg'"></ColorPicker></el-form-item>
                <el-form-item label="背景图片" v-if="page_config.bg_type == 2">
                  <div class="img_box" style="width: 100px;height: 100px;"><Upload :tempUrl="page_config.nav_bgimg" @input="getbgimg"></Upload></div>
                  <span>建议尺寸：375*64</span>
                </el-form-item>
                <el-form-item label="功能按钮">
                  <el-radio-group v-model="page_config.nav_type">
                    <el-radio :label="'white'">白色</el-radio>
                    <el-radio :label="'black'">黑色</el-radio>
                  </el-radio-group>
                </el-form-item>
              </el-form>
            </div>
          </el-card>
        </div>
      </div>
      <el-dialog title="确认" :visible.sync="show_edit" width="400px">
        <el-form label-width="80px">
          <el-form-item label="模板名称"><el-input v-model="page_data.page_name"></el-input></el-form-item>
          <el-form-item label="发布渠道">
            <el-checkbox-group v-model="source">
              <el-checkbox v-entry="1" :label="'1'">微信小程序</el-checkbox>
              <el-checkbox v-entry="2" :label="'2'">微信公众号</el-checkbox>
              <el-checkbox v-entry="3" :label="'3'">H5</el-checkbox>
            </el-checkbox-group>
          </el-form-item>
        </el-form>
        <div class="dialog-footer">
          <el-button @click="show_edit = false">取消</el-button>
          <el-button type="primary" @click="bindsave(savetype)">确定</el-button>
        </div>
      </el-dialog>
      <el-dialog class="selectlink" title="链接选择器" :visible.sync="drawer" destroy-on-close width="800px">
        <SelectLink ref="selectlink" :linktype="linktype" :linkdata="linkdata" @changelink="changelink" @closepup="drawer = false"></SelectLink>
      </el-dialog>
      <el-dialog class="selecticon" title="图标选择器" :visible.sync="iconshow" destroy-on-close width="960px"><SelectIcon @changeIcon="changeIcon"></SelectIcon></el-dialog>
    </div>
  </div>
</template>

<script>
// 引入拖拽组件
import draggable from 'vuedraggable';
//组件列表
import type_data from './modules/data';
//按钮列表
import btn_data from './modules/btn_data';
import SelectLink from '@/components/SelectLink/index';
import SelectIcon from '@/components/SelectIcon/index';
import html2canvas from 'html2canvas';
import ColorPicker from '@/components/ColorPicker/index';
import {objextend} from '@/utils/index.js';
import {showLoading, hideLoading} from '@/utils/loading';
import Upload from '@/components/Upload/SingleImage2';
import navJson from './modules/nav.json';
import {mapGetters} from 'vuex';

import {
  pagebase64Up,
  pagecreate,
  renovationdetail,
  editupRenovation,
  saveTemplate,
  getTemplateInfo,
  getMyTemplateInfo,
  saveMyTemplate,
  geadvert,
  startAdvert
} from '@/api/mall/dndlist';
export default {
  name: 'demo',
  components: {
    draggable,
    SelectLink,
    SelectIcon,
    ColorPicker,
    Upload
  },
  data() {
    return {
      list: [],
      list1: [],
      show_edit: false,
      source: [],
      hideline: false,
      temp: 0,
      activeNames: [0, 1, 2, 3],
      controls: null,
      controls_data: '',
      btn_data: btn_data,
      type_data: type_data,
      type: 1,
      navJson: navJson,
      btn_data_txt: ['index', 'detail', 'usercenter', 'index'],
      btn_data_list: [['index'], ['index', 'detail'], ['index', 'usercenter'], ['index'], ['index', 'vipcenter']],
      advs: {
        data: {}
      },
      linktype: ['1', '2', '3', '4', '5', '6', '7', '8'],
      tab_id: 1,
      // back: false,
      drawer: false,
      imglimit: 1,
      iconshow: false,
      imgdata: [],
      imgshow: false,
      linkdata: {},
      savetype: 0,
      dragOptions: {
        filter: '.disabled'
      },
      page_name: '商城首页',
      typelist: [
        {
          type: 1,
          name: '商城首页',
          nav_name: '首页'
        },
        {
          type: 2,
          name: '商品详情',
          nav_name: '商品详情'
        },
        {
          type: 3,
          name: '个人中心',
          nav_name: '个人中心'
        },
        {
          type: 4,
          name: '自定义页面',
          nav_name: '自定义页面'
        },
        {
          type: 5,
          name: '会员中心',
          nav_name: '会员中心'
        }
      ],
      btnlist: [],
      page_data: {
        page_name: '',
        nav_name: '',
        bg_color: '#f3f3f3',
        text_color: '#333333'
      },
      page_config: {
        bg_color: '#f3f3f3',
        text_color: '#333333',
        bg_type: 1,
        nav_bgimg: '',
        nav_bg: '#FFFFFF',
        nav_type: 'black'
      },
      s: 0,
      entry: []
    };
  },
  computed: {
    acitiv_id() {
      return this.list.findIndex(a => a.active === true);
    },
    getname(val) {
      return function(val) {
        // 对计算属性进行传参
        if (this.btnlist && this.btnlist.length > 0) {
          let data = this.btnlist.filter(a => {
            return a.val == val;
          });
          if(data.length>0){
            return data[0].name;
          }else{
            return ''
          }
          
        } else {
          return '';
        }
      };
    },
    geticon(val) {
      return function(val) {
        // 对计算属性进行传参
        if (this.btnlist && this.btnlist.length > 0) {
          let data = this.btnlist.filter(a => {
            return a.val == val;
          });
        if(data.length>0){
          return data[0].icon;
        }else{
          return ''
        }

        } else {
          return '';
        }
      };
    },
    headstyle() {
      let style = '';
      if (this.page_config.bg_type == 1) {
        style = 'background:' + this.page_config.nav_bg;
      } else {
        style = 'background-image:url(' + this.page_config.nav_bgimg + ');';
      }
      return style;
    }
    // ...mapGetters(['entry'])
  },
  watch: {
    acitiv_id() {
      if (this.acitiv_id > -1) {
        this.tab_id = 1;
        let val = this.list[this.acitiv_id].name;
        this.controls_data = this.list[this.acitiv_id].data;
        this.controls = resolve => require.ensure([], () => resolve(require('./control/' + val + '.vue')));
      } else {
        let id = this.list1.findIndex(a => a.active === true);
        if (id > -1) {
          this.tab_id = 1;
          let val = this.list1[id].name;
          this.controls_data = this.list1[id].data;
          this.controls = resolve => require.ensure([], () => resolve(require('./control/' + val + '.vue')));
        }
      }
    }
  },
  mounted() {
    this.$store.dispatch('common/getpicgeturl');
    this.$store.dispatch('common/getlesseeentry').then(a => {
      this.entry = a;
      this.entry.forEach(a => {
        // this.source.push(a + '');
      });
    });

    let list = [];
    btn_data.forEach(a => {
      list = list.concat(a.list);
    });
    this.btnlist = list;
    if (this.$route.query && this.$route.query.type) {
      this.type = this.$route.query.type;
      if (this.type == 1) {
        this.geadvert();
      }
      if (!this.$route.query.id) {
        this.page_data.page_name = this.typelist[this.type - 1].name;
        this.page_data.nav_name = this.typelist[this.type - 1].nav_name;
      }
    }
    if (this.$route.query && this.$route.query.id) {
      this.id = this.$route.query.id;
      this.temp = this.$route.query.temp || 0;
      this.getDetails();
    }

    window.addEventListener('beforeunload', this.beforeunloadHandler, true);
    this.buildadvs();
  },
  destroyed() {
    console.log(1);
    window.removeEventListener('beforeunload', this.beforeunloadHandler, true);
  },
  beforeRouteLeave(to, from, next) {
    // 这里还无法访问到组件实例，this === undefined

    var r = confirm('您是否确认离开此页面-系统可能不会保存您所做的更改。');
    if (r == true) {
      window.removeEventListener('beforeunload', this.beforeunloadHandler, true);
      next();
    } else {
      next(false);
    }
  },

  methods: {
    startAdvert() {
      let data = {
        content: this.advs.data,
        id: this.advs_id
      };
      startAdvert(data).then(res => {});
    },
    geadvert() {
      geadvert({}).then(res => {
        if (res.msg.content) {
          this.advs.data = res.msg.content;
        }
        this.advs_id = res.msg.id;
      });
    },
    getbgimg(data) {
      this.page_config.nav_bgimg = data;
    },
    async bfsave(type) {
      let a = await this.validatelist();
      if (a) {
        this.show_edit = true;
        this.savetype = type;
      }
    },
    acivetitle() {
      this.tab_id = 3;
      this.list.forEach(a => {
        a.active = false;
      });
      this.list1.forEach(a => {
        a.active = false;
      });
    },
    //验证
    async validatelist() {
      var alist;
      var type;
      var c = true;
      for (var i = 0; i < this.list.length; i++) {
        var a = this.list[i];
        if (a.name == 'toptabs') {
          alist = a.data.list;
          type = ['name', 'linkdata'];
        }
        if (a.name == 'banner') {
          alist = a.data.imglist;
          type = ['imgurl'];
        }
        if (a.name == 'btnGroup') {
          alist = a.data.list;
          type = ['linkdata', 'imgurl', 'name'];
        }
        if (a.name == 'hot_area') {
          alist = a.data.list;
          type = ['imgurl'];
        }
        if (a.name == 'shangpinzu') {
          alist = a.data.list;
          type = ['commodity'];
        }
        if (a.name == 'singlePics') {
          alist = a.data.imglist;
          type = ['imgurl'];
        }
        if (a.name == 'coupon') {
          alist = a.data.list;
          type = ['coupon'];
        }
        if (a.name == 'cube') {
          alist = a.data.checklist;
          type = ['linkdata', 'imgurl'];
        }
        if (a.name == 'merchgroup') {
          alist = a.data.list;
          type = ['merchgroup'];
        }
        if (a.name == 'tabsContent') {
          alist = a.data.content;
          type = ['name', 'tabslist'];
        }

        if (a.name == 'groupon'||a.name == 'recharge') {
          alist = a.data;
          type = ['activity','commodity_byactivity'];
        }
        var b = await this.conutAttri(alist, i, type);
        if (!b) {
          c = b;
          break;
        }
      }
      return c;
    },
    async conutAttri(data, i, type) {
      if (!type) {
        return true;
      }
      if (type.indexOf('name') > -1) {
        let a = data.findIndex(_ => {
          return _.name == '';
        });
        if (a > -1) {
          this.countList(i, '请输入名称');
          return false;
        }
      }
      if (type.indexOf('text') > -1) {
        let a = data.findIndex(_ => {
          return _.text == '';
        });
        if (a > -1) {
          this.countList(i, '请输入按钮文字');
          return false;
        }
      }
      if (type.indexOf('icon') > -1) {
        let a = data.findIndex(_ => {
          return _.icon == '';
        });
        if (a > -1) {
          this.countList(i, '请选择图标');
          return false;
        }
      }
      if (type.indexOf('linkdata') > -1) {
        let a = data.findIndex(_ => {
          return !_.linkdata || _.linkdata.link == '';
        });
        if (a > -1) {
          this.countList(i, '请选择页面链接');
          return false;
        }
      }
      if (type.indexOf('imgurl') > -1) {
        let a = data.findIndex(_ => {
          return _.url == '';
        });
        if (a > -1) {
          this.countList(i, '请选择图片');
          return false;
        }
      }
      if (type.indexOf('activity') > -1) {
        console.log(data.selectdata.id)
        if (!data.selectdata.id) {
          this.countList(i, '请选择活动');
          return false;
        }
      }
     if (type.indexOf('commodity_byactivity') > -1) {
        let a = data.list.filter(_ => {
          return !!_.id;
        });
        if (a.length < 1) {
          this.countList(i, '请添加商品');
          return false;
        }
      }
      if (type.indexOf('commodity') > -1) {
        let a = data.filter(_ => {
          return !!_.id;
        });
        if (a.length < 1) {
          this.countList(i, '请添加商品');
          return false;
        }
      }
      if (type.indexOf('coupon') > -1) {
        let a = data.filter(_ => {
          return !!_.id;
        });
        if (a.length < 1) {
          this.countList(i, '请添加优惠券');
          return false;
        }
      }
      if (type.indexOf('merchgroup') > -1) {
        let a = data.filter(_ => {
          return !!_.id;
        });
        if (a.length < 1) {
          this.countList(i, '请添加商户');
          return false;
        }
      }
      if (type.indexOf('titleBar') > -1) {
        let a = data.content.findIndex(_ => {
          return _.left == '';
        });
        let b = data.content.findIndex(_ => {
          return _.right == '';
        });
        if (a > -1 || b > -1) {
          this.countList(i, '请输入文字内容');
          return false;
        }
      }
      if (type.indexOf('tabslist') > -1) {
        for (let index = 0; index < data.length; index++) {
          if (data[index].data[data[index].type].list.length < 1) {
            this.countList(i, `请为 ${data[index].name} 标签添加商品`);
            return false;
          }
        }
      }
      return true;
    },
    countList(i, msg) {
      this.handleChange(i);
      this.$message.error(msg);
    },
    bindsave(type) {
      this.handleChange(0);
      showLoading('生成预览图片');
      // this.tab_id = 1;
      // document.getElementById("phone_header").scrollIntoView({
      //   behavior: "smooth",
      //   block: "start",
      //   inline: "nearest"
      // });

      // return false
      //  document.getElementById("box").scrollTo({
      //   left: 0,
      //   behavior: 'smooth'
      // });
      this.hideline = true;
      this.show_edit = false;
      setTimeout(() => {
        if (type == 3 || type == 4) {
          this.tempsave();
        } else {
          this.save(type);
        }
      }, 3000);
    },
    tempsave() {
      // this.hideline = true;
      const _this = this;

      html2canvas(_this.$refs.copyDom, {
        // backgroundColor: '#FFF',
        useCORS: true,
        height: 828
      }).then(canvas => {
        // 转成图片，生成图片地址
        let small_img = canvas.toDataURL('image/jpg');
        let data = {
          images: small_img
        };
        this.hideline = false;
        hideLoading();

        pagebase64Up(data).then(res => {
          let configure = {
            list: _this.list,
            page_data: _this.page_data,
            page_config: _this.page_config
          };

          let data = {
            page_type: _this.type,
            small_img: res.msg,
            configure: JSON.stringify(configure),
            page_name: _this.page_data.page_name,
            page_config: _this.page_config
          };
          if (_this.id && _this.savetype == 4) {
            data.id = _this.id;
            saveMyTemplate(data).then(res => {
              _this.removeload();
              _this.$router.go(-1);
            });
          } else {
            saveTemplate(data).then(res => {
              _this.removeload();
              _this.$router.go(-1);
            });
          }
        });
      });
    },
    removeload() {
      window.removeEventListener('beforeunload', this.beforeunloadHandler, true);
    },
    save(type) {
      if (this.source.length == 0) {
        this.$message.error({
          message: '至少选择一个渠道',
          type: 'success',
          duration: 2000
        });
        hideLoading();
        return false;
      }
      this.source.sort((a, b) => {
        return Number(a) - Number(b);
      });

      const _this = this;
      this.hideline = true;
      html2canvas(_this.$refs.copyDom, {
        backgroundColor: '#fff',
        height: 828,
        useCORS: true
      }).then(canvas => {
        // 转成图片，生成图片地址
        this.hideline = false;
        hideLoading();
        let small_img = canvas.toDataURL('image/jpg');
        let data = {
          images: small_img
        };

        pagebase64Up(data).then(res => {
          let configure = {
            list: _this.list,
            list1: _this.list1,
            page_data: _this.page_data,
            page_config: _this.page_config
          };
          if (_this.type == 1) {
            _this.startAdvert();
          }
          let data = {
            page_type: _this.type,
            small_img: res.msg,
            configure: JSON.stringify(configure),
            page_name: _this.page_data.page_name,
            status: type,
            source: this.source.join(','),
            page_config: _this.page_config
          };
          if (_this.id) {
            if (_this.temp) {
              var postfun = pagecreate;
            } else {
              data.status = 2;
              data.id = _this.id;
              var postfun = editupRenovation;
            }
          } else {
            var postfun = pagecreate;
          }
          postfun(data).then(res => {
            _this.removeload();
            _this.$router.go(-1);
          });
        });
      });
    },
    getDetails() {
      let data = {
        id: this.id
      };
      if (this.temp == 1) {
        var getfun = getTemplateInfo;
      } else if (this.temp == 2) {
        var getfun = getMyTemplateInfo;
      } else {
        var getfun = renovationdetail;
      }

      getfun(data).then(res => {
        let configure = JSON.parse(res.msg.configure);
        let list = configure.list;
        let list1 = configure.list1;
        // let advs = configure.advs;
        let page_config = res.msg.page_config ? JSON.parse(res.msg.page_config) : this.page_config;
        this.page_data = objextend(this.page_data, configure.page_data);
        console.log(page_config);
        this.page_config = objextend(this.page_config, page_config);
        if (res.msg.source) {
          this.source = res.msg.source.split(',');
        }
        list.forEach(a => {
          if (a.name == 'detail_btns' && !a.data.btnlist) {
            a.data.btnlist = [
              {
                text: '加入购物车',
                type: 1,
                linkdata: {},
                show: 1
              },
              {
                text: '立即购买',
                type: 2,
                linkdata: {},
                show: 1
              }
            ];
          }
          let mycomponents = resolve => require.ensure([], () => resolve(require('./components/' + a.name + '.vue')));
          a.components_item = mycomponents;
        });
        this.list = list;
        if (list1) {
          list1.forEach(a => {
            let mycomponents = resolve => require.ensure([], () => resolve(require('./components/' + a.name + '.vue')));
            a.components_item = mycomponents;
          });
          this.list1 = list1;
        }
        // if (advs) {
        //   = advs;
        // }
      });
    },
    /*选择器开始*/
    showlinkselcet(data, linktype) {
      this.drawer = true;
      this.linkdata = data;
      if (linktype && linktype.length > 0) {
        this.linktype = linktype;
      } else {
        this.linktype = ['1', '2', '3', '4', '5', '6', '7', '8'];
      }
      this.$nextTick(() => {
        this.$refs.selectlink.init(data);
      });
    },
    changelink(data) {
      this.drawer = false;
      console.log(data);
      this.$refs.controls.getAData(data);
    },
    showiconselcet(data) {
      this.iconshow = true;
    },
    changeIcon(data) {
      this.iconshow = false;
      this.$refs.controls.geticon(data);
    },
    showimgselcet(data, i) {
      this.imgshow = true;
      this.imglimit = i;
      this.imgdata = data;
    },
    changeImg(data) {
      this.imgshow = false;
      this.$refs.controls.getimg(data);
    },
    /*选择器结束*/
    beforeunloadHandler(e) {
      e = e || window.event;
      if (e) {
        e.returnValue = '您是否确认离开此页面-系统可能不会保存您所做的更改。';
      }
      return '您是否确认离开此页面-系统可能不会保存您所做的更改。';
    },
    //删除
    delhandle(i) {
      this.list.splice(i, 1);
      this.handleChange(0);
      if (this.acitiv_id == 0) {
        let val = this.list[this.acitiv_id].name;
        this.controls_data = this.list[this.acitiv_id].data;
        this.controls = resolve => require.ensure([], () => resolve(require('./control/' + val + '.vue')));
      }
    },
    delhandle1(i) {
      this.list1.splice(i, 1);
      this.handleChange(0);
      // if (this.acitiv_id == 0) {
      //   let val = this.list1[this.acitiv_id].name;
      //   this.controls_data = this.list1[this.acitiv_id].data;
      //   this.controls = resolve => require.ensure([], () => resolve(require('./control/' + val + '.vue')));
      // }
    },

    goback() {
      this.$router.go(-1);
    },
    showadvs() {
      this.tab_id = 2;
      let val = 'advs';
      this.adv_controls = resolve => require.ensure([], () => resolve(require('./control/' + val + '.vue')));
    },
    buildadvs() {
      let val = 'advs';
      //引入组件
      let mycomponents = resolve => require.ensure([], () => resolve(require('./components/' + val + '.vue')));
      //引入控制器
      // this.controls = resolve => require.ensure([], () => resolve(require('./control/' + val + '.vue')));
      //引入变量
      let data = JSON.parse(JSON.stringify(type_data[val]));

      this.advs = {
        components_item: mycomponents,
        name: val,
        active: true,
        data: data
      };
    },
    Control_Change(data) {
      // this.list[this.acitiv_id].data = data
      // console.log(this.list)
    },
    //切换激活组件
    handleChange(i) {
      this.list1.forEach(a => {
        a.active = false;
      });
      if (this.list.length > 0) {
        this.list.forEach(a => {
          a.active = false;
        });
        this.list[i].active = true;
      } else {
        this.controls = null;
      }
      this.scrolli(i);
      // this.acitiv_id = i
    },
    async scrolli(i) {
      document.getElementById('item' + i).scrollIntoView({
        behavior: 'smooth',
        block: 'start',
        inline: 'nearest'
      });
    },
    handleChange1(i) {
      this.list.forEach(a => {
        a.active = false;
      });

      if (this.list1.length > 0) {
        this.list1.forEach(a => {
          a.active = false;
        });
        this.list1[i].active = true;
        this.controls_data = this.list1[i].data;
        this.controls = resolve => require.ensure([], () => resolve(require('./control/' + this.list1[i].name + '.vue')));
      } else {
        this.controls = null;
      }
    },
    //新增组件
    addcomponent(item) {
      this.tab_id = 1;
      let val = item.val;
      let acitiv_id = this.acitiv_id + 1;

      this.list.forEach(a => {
        a.active = false;
      });
      //唯一组件判断
      if (item.only) {
        let list = this.list;
        if (item.type == 2) {
          list = this.list1;
        }
        let i = list.findIndex(x => x.name === val);
        if (i > -1) {
          //已存在
          this.$message.error('此元素最多存在一个');

          if (item.type == 2) {
            this.list1.forEach(a => {
              a.active = false;
            });
            this.list1[i].active = true;
            // this.list1
          } else {
            this.list[i].active = true;
          }
          return false;
        }
      }

      //引入组件
      let mycomponents = resolve => require.ensure([], () => resolve(require('./components/' + val + '.vue')));
      //引入控制器
      this.controls = resolve => require.ensure([], () => resolve(require('./control/' + val + '.vue')));
      //引入变量
      let data = JSON.parse(JSON.stringify(type_data[val]));
      if (item.type == 2) {
        this.list.forEach(a => {
          a.active = false;
        });
        this.list1.forEach(a => {
          a.active = false;
        });
        this.list1.push({
          components_item: mycomponents,
          name: val,
          active: true,
          data: data
        });
        this.controls_data = data;
      } else {
        this.list1.forEach(a => {
          a.active = false;
        });
        this.list.splice(acitiv_id, 0, {
          components_item: mycomponents,
          name: val,
          active: true,
          data: data
        });
      }
      // this.scrolli(acitiv_id)
    }
  }
};
</script>
<style lang="scss">
#box {
  width: 100%;
  overflow-x: scroll;
}
.menulist {
  position: absolute;
  width: 303px;
  height: calc(100% - 40px);
  top: 20px;
  background: #ffffff;
  box-shadow: 0px 5px 43px 0px rgba(0, 0, 0, 0.16);
  border-radius: 10px;
  left: 340px;
  overflow-y: auto;
  &::-webkit-scrollbar {
    display: none !important; /* Chrome Safari */
  }
  .menu_item {
    width: 282px;
    height: 53px;
    display: flex;
    align-items: center;
    margin: 0 auto;
    padding: 0 22px 0 32px;
    box-sizing: border-box;
    justify-content: space-between;
    //
    font-size: 14px;
    border-radius: 10px;
    cursor: pointer;
    > div {
      display: flex;
      align-items: center;
    }
    .menu_icon_box {
      width: 40px;
      height: 40px;
      display: flex;
      align-items: center;
      justify-content: center;
      i {
        color: #2d8cf0;
        font-size: 24px;
      }
    }
    .del {
      color: #4d6ef2;
    }
    &.active-item {
      background: #4d6ef2;
      color: #ffffff;
      i {
        color: #ffffff;
      }
      .del {
        color: #ffffff;
      }
      &:hover {
        background: #4d6ef2;
      }
    }
    &:hover {
      background: #e9f3fc;
    }
  }
}
.input_content {
  margin-top: 10px;
  background: #f4f6f8;
  border-radius: 2px;
  box-sizing: border-box;
  padding: 20px;
}

.input_content .el-color-picker__trigger {
  width: 70px;
}

.input_div {
  display: flex;
  margin-bottom: 10px;
}

.input-with-reset {
  width: 240px;
  margin-left: 10px;
  height: 36px;
}

.color_div {
  display: flex;
  align-items: center;
}

.slider_box {
  display: flex;
  .el-input-number {
    width: 80px;
    position: relative;
    &::after {
      content: 'px';
      position: absolute;
      right: 10px;
      top: 0px;
    }
    .el-input {
      width: 80px;
    }
  }
}
.slider_box_num {
  display: flex;
  .el-input-number {
    width: 120px;
  }
}

.slider_item {
  width: 240px;
  margin-right: 20px;
}

.slider_input {
  width: 110px;
}
.component-setter .el-card__body {
  height: calc(100vh - 125px);
  overflow-y: auto;
}
.selectlink .el-dialog__body {
  padding-bottom: 0;
}

/* //选择图标 */
.icon_box {
  width: 36px;
  height: 36px;
  line-height: 36px;
  text-align: center;
  cursor: pointer;
  border: 1px solid #dcdfe6;
  position: relative;

  .icon-abl-close {
    position: absolute;
    top: -6px;
    right: -9px;
    color: rgba(0, 0, 0, 0.3);
    font-size: 16px;
  }
  .noIcon {
    width: 36px;
    height: 36px;
    display: inline-block;
  }
  &:hover {
    .choose_bar {
      display: block;
    }
  }

  .choose_bar {
    display: none;
    position: absolute;
    bottom: 0;
    left: 0;
    font-size: 10px;
    background: rgba(0, 0, 0, 0.7);
    color: #fff;
    line-height: 18px;
    text-align: center;
    width: 100%;

    i.txt {
      display: inline-block;
      font-style: normal;
      -webkit-transform: scale(0.75);
      transform: scale(0.75);
      letter-spacing: 2px;
    }
  }
}
</style>
<style scoped lang="scss">
.dialog-footer {
  display: flex;
  align-items: center;
  justify-content: center;
  // text-align: center;
}
.app {
  width: 640px;
  margin: 0 auto;
  height: 800px;
  overflow: scroll;
}
.dn-container {
  width: 100% !important;
  height: 100vh;
  box-sizing: border-box;
  overflow-y: hidden;
  min-width: 1750px;
  .main-header {
    color: #fff;
    height: 56px;
    background: #ffffff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .header-left {
      display: flex;
      align-items: center;
      .back-div {
        width: 80px;
        height: 30px;
        background: rgba(77, 110, 242, 1);
        box-shadow: 0px -4px 0px 0px rgba(0, 0, 0, 0.1) inset;
        border-radius: 7px;
        margin-left: 40px;
        box-sizing: border-box;
        margin-right: 183px;
        // margin: auto;
        text-align: center;
        line-height: 30px;
        font-family: PingFang SC;
        font-style: normal;
        font-weight: normal;
        font-size: 14px;
        color: #ffffff;
        cursor: pointer;
        &:hover {
          // background-color: #182533;
        }
      }
      .tabs {
        display: flex;
        align-items: center;
        .tab {
          display: flex;
          align-items: center;
          padding: 0 18px;
          height: 56px;
          cursor: pointer;
          color: #333333;
          font-size: 16px;
          border-bottom: 3px solid #fff;
          &.on {
            color: #4d6ef2;
            border-bottom: 3px solid #4d6ef2;
            // background: #131f2b;
          }
        }
      }
    }
    .header-right {
      display: flex;
      align-items: center;
      margin-right: 40px;
      .tabs {
        display: flex;
        align-items: center;
        .tab {
          display: flex;
          align-items: center;
          padding: 0 18px;
          height: 56px;
          cursor: pointer;
          &.on {
            background: #131f2b;
          }
        }
      }
      .btn-group {
        display: flex;

        align-items: center;
        .btn {
          position: relative;
          padding: 0 20px;
          min-width: 80px;
          height: 56px;
          font-size: 14px;
          line-height: 56px;
          color: #ffffff;
          cursor: pointer;
          display: flex;
          align-items: center;
        }
        .btn-apply {
          // padding: 0 16px;

          display: flex;

          align-items: center;

          justify-content: center;
          border-radius: 2px;
          height: 32px;
          font-size: 14px;
          color: #fff;
          width: 100px;
          height: 32px;
          background: rgba(77, 110, 242, 1);
          box-shadow: 0px -4px 0px 0px rgba(0, 0, 0, 0.1) inset;
          border-radius: 7px;
          margin-left: 18px;
          cursor: pointer;
        }
      }
    }
  }
}

.main_body {
  width: 100%;
  min-width: 1300px;
  box-sizing: border-box;
  padding-left: 306px;
  padding-right: 540px;
  display: flex;
  position: relative;
  background: #f4f6f8;
  justify-content: center;
  overflow: auto;
  // height: 100%;
  height: calc(100vh - 56px);
  .main_left {
    position: absolute;
    width: 306px;
    height: 100%;
    left: 0;
    top: 0;
    bottom: 22px;
    z-index: 0;
    background: #ffffff;
    padding: 0 0 0 15px;
    overflow-y: auto;

    .btn_group {
      display: flex;
      flex-wrap: wrap;

      .btn_item {
        position: relative;
        margin: 5px;
        width: 82px;
        height: 82px;
        box-sizing: border-box;
        padding: 0;
        background: #f4f6f8;
        border-radius: 2px;
        border: none;
        display: flex;
        align-items: center;
        flex-direction: column;
        justify-content: center;
        cursor: pointer;

        i {
          font-size: 24px;
          color: #2d8cf0;
        }
      }
    }
  }

  .phone-area {
    // height: 100%;
    // min-width: 496px;
    width: 434px;
    height: 828px;
    // flex: 1;
    // position: absolute;

    box-sizing: border-box;
    margin-right: -10px;
    margin-left: 380px;
    background: url(../../../assets/images/ipbg.png) no-repeat;
    .relative {
      position: relative;
      width: 375px;
      height: 667px;
      margin: 69px auto 0 auto;
    }
    .scroll-body {
      overflow-y: auto;
      height: fit-content;
      width: 375px;
      height: 667px;

      -ms-flex-negative: 0;
      flex-shrink: 0;
      border-radius: 2px;
      box-shadow: 0px 4px 14px rgba(133, 148, 162, 0.2);

      // position: relative;
      // left: -1px;
      &::-webkit-scrollbar {
        display: none !important; /* Chrome Safari */
      }
      .page-content {
        min-height: 100%;
        width: 375px;

        .diy-phone {
          width: 375px;
          height: auto;
          min-height: 100%;
          background: #fff;

          .phone-body {
            background: #f3f3f3;
            .phone-main {
              min-height: 667px;
              box-sizing: border-box;
              border-top: 0;
              user-select: none;

              display: flex;
              flex-direction: column;
            }
            .phone-title {
              height: 64px;
              background: #fff;
              background-size: 100% auto;
              text-align: center;
              cursor: pointer;
              display: block;
              white-space: nowrap;
              text-overflow: ellipsis;
              position: relative;
              &.pageInfo {
                box-shadow: 0 0 2px 0 #2d8cf0;
                z-index: 1000;
                position: relative;
              }
              .page-title {
                position: absolute;
                z-index: 100;
                font-family: PingFang SC;
                font-style: normal;
                font-weight: 600;
                font-size: 18px;
                line-height: 25px;
                display: flex;
                align-items: center;
                text-align: center;
                color: #212121;
                left: 50%;
                transform: translate(-50%, 0);
                bottom: 10px;
                margin: 0;
              }

              .phone-top {
                display: flex;
                flex-direction: column;
                width: 375px;
                overflow: hidden;
                .custom-navbar {
                  width: 375px;
                  height: 64px;
                  background-size: cover;
                  background-repeat: no-repeat;
                }
                .custom-navbar img {
                  position: absolute;
                  right: 7px;
                  width: 87px;
                  height: 32px;
                  bottom: 6px;
                }
              }
            }
          }
        }
      }
    }
  }
}

.phone-area::-webkit-scrollbar {
  display: none;
}

.drag-item {
  color: #000;
  // border: 1px solid red;
  width: 100%;
  // height: 300px;
  position: relative;
  cursor: pointer;
}

.drag-item::before,
.drag-item::after {
  content: '';
  position: absolute;
  width: 100%;
  height: 0;
  left: 0;
  z-index: 100;
}

.drag-item::before {
  top: 0;
}

.drag-item::after {
  bottom: 0;
}

.drag-item .border {
  height: 100%;
  width: 0;
  position: absolute;
  top: 0;
  z-index: 10;
}

.drag-item:hover {
  .border {
    border-left: 1px dashed #2d8cf0;
  }

  &::before {
    border-top: 1px dashed #2d8cf0;
  }

  &::after {
    border-top: 1px dashed #2d8cf0;
  }

  .del {
    display: block;
  }
}

.drag-item .left-border {
  left: 0;
}

.drag-item .right-border {
  right: 0;
}

.active-item .border {
  border-left: 1px solid #2d8cf0 !important;
}

.drag-item .del {
  position: absolute;
  width: 40px;
  height: 20px;
  right: 40px;
  top: 0;
  background: #ff1f2c;
  border-radius: 0px 0px 2px 2px;
  text-align: center;
  line-height: 18px;
  font-family: PingFang SC;
  font-style: normal;
  font-weight: normal;
  font-size: 12px;
  color: #fff;
  cursor: pointer;
  z-index: 1000;
  display: none;
  transform: translate(100%, 0);
}

.active-item .del {
  display: block;
}

.active-item::before,
.active-item::after {
  border-top: 1px solid #2d8cf0 !important;
}

.component-setter {
  transform: translateX(0);
  position: absolute;
  width: 540px;
  height: 100%;
  right: 0;
  top: 0;
  background: #ffffff;
  border: 1px solid #e9edef;
  box-sizing: border-box;
  border-radius: 2px;
  .el-card__body {
    height: calc(100% - 55px);
    overflow-y: auto;
  }
}
.blank {
  background-color: #ffffff;
  position: fixed;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  z-index: 10000;
}
</style>
